<script setup>
import { reactive, ref, onMounted, onUnmounted } from 'vue';
import bg_login from '@image/bg_login.jpeg';
import bg_login2 from '@image/bg_login2.png';
import logo from '@image/logo.png';
import { User, Unlock, Aim } from '@element-plus/icons-vue';
import { service } from '@utils';
import { ElMessage } from 'element-plus';
import store, { STORE_KEY } from '@store';
import { common } from '@utils'
import { useRouter } from 'vue-router';
import { NAME } from '@config';
import Cookies from 'js-cookie';
import { cache } from '@utils';
import { initRoutes } from '../../router';

const router = useRouter();

const isCode = ref(false);

const codeUrl = ref('');

const formRef = ref();

const loading = ref(false);

const loginForm = reactive({
    userName: '',
    password: '',
    captcha: '',
    uuid: '',
});

const rules = {
    userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    captcha: [{ required: true, message: '请输入验证码', trigger: 'change' }],
};

function initData() {
    const userName = Cookies.get('userName');
    loginForm.userName = userName || '';
}

//点击回车键登录
const keyDown = e => {
    if (e.keyCode == 13) {
        login();
    }
};

onMounted(() => {
    //绑定监听事件
    window.addEventListener('keydown', keyDown);
});
onUnmounted(() => {
    //销毁事件
    window.removeEventListener('keydown', keyDown, false);
});
//发送验证码
const getCode = async () => {
    const res = await service.user.codeImg();
    if (res) {
        codeUrl.value = res.captcha;
        loginForm.uuid = res.uuid;
    }
};

//登录action
const login = async () => {
    formRef.value.validate(valid => {
        valid && realLogin();
    });
};

//登录接口
const realLogin = async () => {
    loading.value = true;
    store.dispatch(STORE_KEY.A_CLEAR_TOKEN);
    const { userName, password, captcha, uuid } = loginForm;
    const res = await service.user.login(loginForm, userName, password, captcha, uuid);
    if (res.resultCode == 8200) {
        Cookies.set('userName', userName, { expires: 30 });
        store.dispatch(STORE_KEY.A_LOGIN, res.data.sessionId);
        store.commit(STORE_KEY.M_UPDATE_USER, res.data.userVo);
        // //TODO: 后期删除
        let menuVoList = res.data.buttonPerms;
        let permissions = [];
        menuVoList.forEach(item => {
            if (item.perms) permissions.push(item.perms);
        });
        store.commit(STORE_KEY.M_UPDATE_PREMISSION, permissions);
        getRouters2(res.data.menuPermsTree);
        router.replace({ path: '/transfer' });
    } else {
        loading.value = false;
        if (res.resultCode == 8209) {
            getCode();
        }
        // ElMessage.error(res.message)
    }
};

const getRouters = async () => {
    const res = await service.user.routers();
    if (res.success) {
        initRoutes(res.data);
        router.replace({ path: '/transfer' });
    } else {
        ElMessage.error(res.message);
        loading.value = false;
    }
};
const getRouters2 = async res => {
    if (res) {
        res.forEach(item => {
            // item.name = item.path.replace('/', '');
            if (item.children) {
                item.children.forEach(item1 => {
                    item1.path = item1.path.replace(item.path, '');
                    if (item1.path[0] === '/') {
                        item1.path = item1.path.substr(1);
                    }
                });
            }
        });
        cache.set(cache.key.ROUTERS, res);
        initRoutes(res);
        router.replace({ path: '/transfer' });
    } else {
        ElMessage.error(res.message);
        loading.value = false;
    }
};
initData();
getCode();

const bg_login_css = {
    backgroundImage: 'url(' + bg_login2 + ')',
    height: '100%',
    width: '100%',
    backgroundRepeat: 'no-repeat',
    backgroundSize: '100% 100%',
};

const clientWidth = document.body.clientWidth;
</script>
<template>
    <section :style="bg_login_css">
        <div class="banner translateY"></div>
        <div class="content" :class="[clientWidth > 750 ? 'flex-align' : 'flex-align-center']">
            <div v-if="clientWidth > 750" class="title-wrapper flex1 flex-align-center"></div>
            <!-- <div v-if="clientWidth > 750" class="title-wrapper flex1 flex-align-center">{{NAME}}管理系统</div> -->
            <section class="login-wrapper flex-column-align-center">
                <div class="login">
                    <div class="login-title">登录</div>
                    <!-- <div class="logo">
                        <div style="width: 100%; height: 100%" class="relative">
                            <img
                                :src="logo"
                                class="translateXY absolute"
                                style="width: 100%; border-radius: 50%"
                            />
                        </div>
                    </div> -->
                    <el-form :model="loginForm" :rules="rules" ref="formRef" size="large" style="margin-top: 50px" onsubmit="return false;">
                        <el-form-item prop="userName">
                            <el-input class="login-input" v-model.trim="loginForm.userName" :prefix-icon="User" placeholder="请输入账号" clearable></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input class="login-input" v-model.trim="loginForm.password" type="password" show-password :prefix-icon="Unlock" placeholder="请输入密码" clearable />
                        </el-form-item>
                        <el-row :gutter="20">
                            <el-col :span="14">
                                <el-form-item prop="captcha">
                                    <el-input class="login-input" v-model.trim="loginForm.captcha" :prefix-icon="Aim" placeholder="请输入验证码" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <img :src="codeUrl" @click="getCode" class="cursor" style="height: 40px; width: 100%" />
                            </el-col>
                        </el-row>
                        <div class="padding-top20">
                            <el-button type="primary" class="width100" @click="login" @keydown.enter="keyDown" :loading="loading" style="background: linear-gradient(90deg, #fd8756 0%, #ff1709 100%); border: 0">登录</el-button>
                        </div>
                    </el-form>
                </div>
            </section>
        </div>
        <div class="ba">
            <span style="margin-right: 6px">Copyright©</span>
            <span><a href="https://beian.miit.gov.cn" target="_blank">京ICP备2023028137号-2</a></span>
        </div>
    </section>
</template>

<style lang="scss" scoped>
.ba {
    // background: ;
    position: fixed;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 2vh;
    bottom: 6px;
    left: 0;
    right: 0;
    color: #f4f4f4;
    a {
        text-decoration: none;
        color: #f4f4f4;
    }
}
.banner {
    // background: #347ebc;
    width: 100%;
    height: 237px;
    opacity: 0.6;
    position: absolute;
    z-index: 1;
}
.content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    padding: 0 10%;
}

.login-wrapper {
    position: relative;
    width: 340px;
}

.title-wrapper {
    color: #fff;
    font-size: 56px;
}

@media (min-width: 750px) {
    .content {
        padding: 0 10% 0 0;
    }
}
@media (min-width: 1400px) {
    .content {
        padding: 0 15% 0 0;
    }
}

@media (max-width: 749px) {
    .title-wrapper {
        width: 0;
        height: 0;
        overflow: hidden;
    }
}

.login {
    width: 100%;
    background: #fff;
    box-shadow: 0 0 50px rgb(0 0 0 / 40%);
    border-radius: 5px;
    padding: 10%;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    border: 2px solid #b23f3f;
    backdrop-filter: blur(6px);
    .login-title {
        width: 70px;
        border-bottom: 2px solid #ffffff;
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
    }
    .logo {
        height: 110px;
        width: 110px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        overflow: hidden;
    }
}
:deep(.el-input .el-input__wrapper) {
    border-radius: 4px;
    border: 1px solid #f37a7a;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 !important;

    --el-text-color-placeholder: #ffffff;
}
:deep(.el-input__inner) {
    color: #ffffff;
}
</style>

<style lang="scss">
:root .login-input {
    --el-text-color-placeholder: #ffffff;
}
</style>
